<script src="https://unpkg.com/vue"></script>

<h3>watch</h3>
<div id="watch">{{ fullName }}</div>

<h3>computed</h3>
<div id="computed">{{ fullName }}</div>

<script>
  var watch = new Vue({
    el: '#watch',
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })


  var computed = new Vue({
    el: '#computed',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName
      // }
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  })

</script>
